<script setup lang="ts">
import {computed} from "vue";
import useLoginStore from "@/stores/modules/login/login";
import {useRoute} from "vue-router";
import router from "@/router";
import {mapPathToMenu} from "@/utils/mapMenus";
import type {ChildMenu} from "@/services/modules/login/type";

const loginStore = useLoginStore();
const userMenus = loginStore.userMenus;
const {collapse = false} = defineProps<{
  collapse?: boolean;
}>();
const route = useRoute();
const defaultActive = computed(() => {
  const pathMenu = mapPathToMenu(route.path, userMenus);
  return pathMenu?.id + "" || "";
});

const handleMenuClick = (subItem: ChildMenu) => {
  router.push(subItem.url as string);
};
</script>

<template>
  <div class="main-menu">
    <div class="logo">
      <img class="img" src="@/assets/img/logo.png" alt=""/>
      <h2 class="title" v-show="!collapse">后台管理系统</h2>
    </div>
    <div class="menu">
      <el-menu
        :collapse="collapse"
        :default-active="defaultActive"
        :default-openeds="[defaultActive]"
      >
        <template v-for="item in userMenus" :key="item.id">
          <el-sub-menu :index="item.id + ''">
            <template #title>
              <el-icon>
                <!-- 字符串 el-icon-monitor   ==>  ['', 'monitor']   -->
                <component :is="item.icon.split('el-icon-')[1]"/>
              </el-icon>
              <span>{{ item.name }}</span>
            </template>
            <template v-for="subItem in item.children" :key="subItem.id">
              <el-menu-item :index="subItem.id + ''" @click="handleMenuClick(subItem)"
              >{{ subItem.name }}
              </el-menu-item>
            </template>
          </el-sub-menu>
        </template>
      </el-menu>
    </div>
  </div>
</template>

<style scoped lang="less">
.main-menu {
  background: #3a94be;
  height: 100%;
}

.logo {
  padding: 8px 0 16px 12px;
  height: 60px;
  display: flex;
  align-items: center;

  .img {
    width: 52px;
    height: 52px;
  }
}

.menu {
  .el-menu {
    background-color: #2aa0c4;
    border-right: none;
    user-select: none;

    //触发和离开都生效
    :deep(.el-sub-menu__title:hover) {
      background: linear-gradient(to right, #2aa0c4, lightblue);
    }

    .el-sub-menu {
      .el-menu-item {
        background-color: #55abd2;

        &.is-active {
          background-color: lightblue;
        }

        &:hover,
        &:hover {
          //渐变色
          background: linear-gradient(to right, #55abd2, lightblue);
        }
      }
    }
  }
}
</style>
